<template>
  <Card>
    <vxe-toolbar>
      <template #buttons>
        <div class="btn-group">
          <Button type="primary" icon="md-add" @click="handleAdd" v-preventReClick v-perms="['menu/add']">新增</Button>
          <Button @click="changeTableTreeExpand" v-preventReClick>展开/折叠</Button>
        </div>
      </template>
    </vxe-toolbar>

    <vxe-table
        style="margin-top: 20px"
        align="center"
        border
        ref="menuTableRef"
        :column-config="{resize:true}"
        :tree-config="{transform:true,rowField:'value',parentField:'pid'}"
        :data="tableMenuData">
      <vxe-column field="title" title="菜单名称" tree-node align="left" width="150"></vxe-column>
      <vxe-column field="type" title="类型" width="80">
        <template #default="{row}">
          <span>{{ row.type === 'C' ? '菜单' : row.type === 'M' ? '目录' : row.type === 'A' ? '按钮' : row.type }}</span>
        </template>
      </vxe-column>
      <vxe-column field="icon" title="图标" width="80">
        <template #default="{row}">
          <Icon :type="row.icon" size="24" v-if="row.icon!==''"/>
        </template>
      </vxe-column>
      <vxe-column field="perms" title="权限标识" width="150"></vxe-column>
      <vxe-column field="is_disable" title="状态" width="90">
        <template #default="{row}">
          <Tag :color="getTagsType(row)" type="border" size="medium">{{
              row.is_disable === 0 ? '正常' : '停用'
            }}
          </Tag>
        </template>
      </vxe-column>
      <vxe-column field="sort" title="排序" width="100"></vxe-column>
      <vxe-column field="update_time" title="更新时间"></vxe-column>
      <vxe-column title="操作" width="160">
        <template #default="{row}">
          <Tag color="#2db7f5" size="medium" style="cursor:pointer;" @click="editMenuInfoById(row)" v-preventReClick
               v-perms="['menu/edit']">编辑
          </Tag>
          <Tag color="error" size="medium" style="cursor:pointer;" @click="delMenuInfoById(row)" v-preventReClick
               v-perms="['menu/del']">删除
          </Tag>
        </template>
      </vxe-column>
    </vxe-table>

    <Modal
        v-model="menuEditShow"
        :title="modalTitle"
        :footer-hide="true"
        width="70%">
      <MenuEdit ref="menuEditRef" v-if="menuEditShow" :menus-data="menuData"></MenuEdit>
      <div slot="footer" style="display: flex;justify-content:right;margin-top: -10px" class="btn-group">
        <Button type="default" @click="cancel" v-preventReClick>取消</Button>
        <Button type="primary" @click="addMenu" v-preventReClick>确定</Button>
      </div>
    </Modal>
  </Card>
</template>

<script setup>
import {computed, getCurrentInstance, nextTick, ref} from "vue";
import MenuEdit from "@/components/permission/menu-edit";
import {MenuService} from "@/api/menu";
import {deepCloneObj, menuArrayToTree} from "@/api/utils";

const menuEditShow = ref(false);

const menuData = ref([]);

const tableMenuData = ref([]);

const tableExpand = ref(false);

const {proxy} = getCurrentInstance();

const modalTitle = ref('添加菜单');

const handleAdd = async () => {
  menuEditShow.value = true
  await nextTick();
  proxy.$refs.menuEditRef.mode = 'add';
}

const addMenu = () => {
  proxy.$refs.menuEditRef.addMenuData();
}

const cancel = () => {
  menuEditShow.value = false;
}

const getMenuData = async () => {
  const {data} = await MenuService.GetMenuList();
  // 深克隆接口菜单值
  const returnData = deepCloneObj(data.data);
  const topMenuData = {title: '顶级', value: 0, children: []};
  topMenuData.children = menuArrayToTree(returnData, 0, 'A');
  console.log(topMenuData)
  menuData.value.push(topMenuData)
  tableMenuData.value = data.data;
}

const getTagsType = computed(() => (e) => {
      return e.is_disable === 0 ? 'primary' : 'error';
    }
)

const changeTableTreeExpand = () => {
  if (tableExpand.value) {
    tableExpand.value = false;
    proxy.$refs.menuTableRef.clearTreeExpand();
  } else {
    tableExpand.value = true;
    proxy.$refs.menuTableRef.setAllTreeExpand(tableExpand.value)
  }
}

const editMenuInfoById = async (e) => {
  modalTitle.value = '编辑菜单'
  menuEditShow.value = true;
  // 等所有节点挂载完毕后执行方法,适用于v-if
  await nextTick();
  proxy.$refs.menuEditRef.mode = 'edit';
  await proxy.$refs.menuEditRef.getDetail(e);
  console.log(e);
}

const delMenuInfoById = async (e) => {
  console.log(e)
  let param = {id: e.value};
  proxy.$Modal.confirm({
    title: '删除操作确认',
    content: '<p>确定执行删除操作?执行成功后数据将不可恢复。</p>',
    onOk: () => {
      postDel(param);
    },
    onCancel: () => {
      return;
    }
  })
}

const postDel = async (param) => {
  const {data} = await MenuService.DeleteMenuById(param);
  if (data.code === 200) {
    proxy.$Message.success({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        // CommonServices.getMenus();
        window.location.reload()
      }
    })
  } else {
    proxy.$Message.error({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        Promise.reject()
      }
    })
  }
}


getMenuData();

</script>

<style scoped lang="less">

@import "./menu.less";
</style>
